﻿<UserControl x:Class="SandwichFlow.SandwichIngredients"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mim="clr-namespace:MetroInMotionUtils"
    xmlns:behaviour="clr-namespace:WP7Contrib.View.Controls.Behaviors;assembly=WP7Contrib.View.Controls"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="150" d:DesignWidth="480"
    Height="150">

  <Grid x:Name="LayoutRoot">
    <Image Source="Images/bread.png"
          HorizontalAlignment="Left"
          VerticalAlignment="Bottom"
          RenderTransformOrigin="0.5,0.5">
    </Image>

    <Image Source="Images/pickle.png"
          x:Name="pickle"
          Margin="50,20,0,10"
          behaviour:PivotSlideBehaviour.AnimationLevel="1">
      <Image.RenderTransform>
        <TranslateTransform x:Name="pickleTrans"
                                  X="400"/>
      </Image.RenderTransform>
      <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
          <BeginStoryboard>
            <Storyboard >
              <DoubleAnimation Duration="00:00:0.7"
                                Storyboard.TargetName="pickleTrans" 
                                Storyboard.TargetProperty="X" 
                                From="400" To="0">
                <DoubleAnimation.EasingFunction>
                  <SineEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
              </DoubleAnimation>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Image.Triggers>
    </Image>

    <Image Source="Images/tom.png"
           Margin="150,70,0,0"
           behaviour:PivotSlideBehaviour.AnimationLevel="2">
      <Image.RenderTransform>
        <TranslateTransform x:Name="tomTrans"
                             X="400"/>
      </Image.RenderTransform>
      <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
          <BeginStoryboard>
            <Storyboard BeginTime="00:00:0.2">
              <DoubleAnimation Duration="00:00:0.7"
                                Storyboard.TargetName="tomTrans" 
                                Storyboard.TargetProperty="X" 
                                From="400" To="0">
                <DoubleAnimation.EasingFunction>
                  <SineEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
              </DoubleAnimation>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Image.Triggers>
    </Image>

    <Image Source="Images/not-butter.jpg"
          HorizontalAlignment="Right"
          Canvas.ZIndex="-10"
          Margin="0,40,10,20"
           behaviour:PivotSlideBehaviour.AnimationLevel="3">
      <Image.RenderTransform>
        <TranslateTransform x:Name="butterTrans"
                           X="400"/>
      </Image.RenderTransform>
      <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
          <BeginStoryboard>
            <Storyboard BeginTime="00:00:0.4">
              <DoubleAnimation Duration="00:00:0.7"
                                Storyboard.TargetName="butterTrans" 
                                Storyboard.TargetProperty="X" 
                                From="400" To="0">
                <DoubleAnimation.EasingFunction>
                  <SineEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
              </DoubleAnimation>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Image.Triggers>
    </Image>

    <Canvas>
      <Image Source="Images/cumber.png"
              Width="100" Height="100"                 
              Canvas.ZIndex="100"
              Margin="350,80,0,0"
             behaviour:PivotSlideBehaviour.AnimationLevel="4">
        <Image.RenderTransform>
          <TranslateTransform x:Name="cumberTrans"
                              X="400"/>
        </Image.RenderTransform>
        <Image.Triggers>
          <EventTrigger RoutedEvent="Image.Loaded">
            <BeginStoryboard>
              <Storyboard BeginTime="00:00:0.6">
                <DoubleAnimation Duration="00:00:0.7"
                                Storyboard.TargetName="cumberTrans" 
                                Storyboard.TargetProperty="X" 
                                From="400" To="0">
                  <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseOut"/>
                  </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Image.Triggers>
      </Image>
    </Canvas>
  </Grid>
</UserControl>
